<template>
  <view class="containers">
    <view>
      <!-- 自定义切换组件 -->
      <div class="gk-sticky">
        <view class="tab-box">
          <view class="switch-tab">
            <view
              :class="'switch-tab-item ' + (book == '充电桩' ? 'active' : '')"
              @tap="onSelect"
              data-name="充电桩"
              >充电桩</view
            >
            <view
              :class="'switch-tab-item ' + (book == '电瓶车' ? 'active' : '')"
              @tap="onSelect"
              data-name="电瓶车"
              >电瓶车</view
            >
          </view>
        </view>
      </div>
      <!-- <view class='cdz_search'>
      <view class='search_input'>
        <icon type='search' size='18px'></icon>
        <input class='input_class' placeholder='请输入备注信息' bindinput='searchInput' value='{{inputValue}}'></input>
        <icon class='clear_class' type='clear' size='18px' hidden='{{inputValue.length==0}}' bindtap='clearInput'></icon>
      </view>
      <view class='cdz_search_btn' bindtap='searchClick'>搜 索</view>
    </view> -->

      <!-- 属性选择 下拉框 -->
      <!-- <view class='select'>
          <view class='select-btn' bindtap='bindSelect'>
            <text wx:if="{{book == '充电桩'}}" class="select-msg select-red">{{book}}</text>
            <text wx:if="{{book == '电瓶车'}}" class="select-msg select-green">{{book}}</text>
            <image class="select-ico" wx:if="{{!selectCash}}" src='../../static/images/28-down.png'></image>
            <image class="select-ico" wx:if="{{selectCash}}" src='../../static/images/29-up.png'></image>
         
          </view> -->
      <!-- 下拉需要显示的列表 -->
      <!-- <view class="select-box" wx:if="{{selectCash}}">
            <view class="select-item select-red" bindtap="onSelect" data-name="充电桩">充电桩</view>
            <view class="select-item select-green" bindtap="onSelect" data-name="电瓶车">电瓶车</view>
          </view>
        </view> -->

      <view>
        <view class="overview" @tap="click_status" data-status="0">
          <image class="status_img" src="/static/images/dpc_link.png"></image>
          <view class="status_box">
            <text class="status_info">空闲中</text>
            <text class="status_number">{{ cdz_link }} 台</text>
          </view>
        </view>
        <div class="gk-divider"></div>
        <view class="overview" @tap="click_status" data-status="2">
          <image class="status_img" src="/static/images/dpc_using.png"></image>
          <view class="status_box">
            <text class="status_info">充电中</text>
            <text class="status_number">{{ cdz_using }} 台</text>
          </view>
        </view>
        <div class="gk-divider"></div>
        <view class="overview" @tap="click_status" data-status="-1">
          <image
            class="status_img"
            src="/static/images/dpc_offline.png"
          ></image>
          <view class="status_box">
            <text class="status_info">离线</text>
            <text class="status_number">{{ cdz_out }} 台</text>
          </view>
        </view>
      </view>

      <view class="list_box">
        <view>
          <view class="cdz_list cdz_list_head">
            <view class="cell_head">终端号</view>
            <view class="cell_head">备注</view>
            <view class="cell_head">时间</view>
            <view class="cell_head">状态</view>
          </view>
          <view class="cdz_list" v-for="(item, index) in codes" :key="index">
            <view class="cell_info cell_client">{{ item.code }}</view>

            <view class="cell_info cell_area">{{ item.tips }}</view>

            <view class="cell_info cell_time">{{
              formatTime(item.last_time)
            }}</view>

            <view class="cell_info cell_status">{{
              dpcStatus(item.stat)
            }}</view>
          </view>
        </view>

        <view>
          <view class="page_box">
            <view class="page_pre" @tap="prePage">上一页</view>
            <view class="page_info"
              >第{{ thisPage }}/{{ pageSum }}页，共{{ codeSum }}条信息</view
            >
            <view class="page_next" @tap="nextPage">下一页</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<!-- <script module="filters" lang="wxs" src="@/pages/utils/filter.wxs"></script> -->
<script>
import { dpcStatus, formatTime } from "@/utils/util"
const app = getApp();
let Sign = app.globalData.Sign;
let Store = app.globalData.Store;
let Api = app.globalData.Api;
let status = -1;
let pageSize = 10;
let pageNum = 1;
export default {
  data() {
    return {
      dpcStatus: dpcStatus,
      formatTime: formatTime,
      inputValue: '',
      manageId: '351daba0fbbe4ff897e002e5977290b8',

      //观察这角色

      book: '充电桩',

      eoc: '-1',
      cdz_link: 0,
      cdz_using: 0,
      cdz_out: 0,
      codes: [],
      thisPage: 0,
      pageSum: 0,
      codeSum: 0,
      selectCash: ''
    };
  },
  onLoad: function () {
    this.checkAll();
  },
  onShow: function () {
    //自动加载离线设备
    this.refresh();
  },
  methods: {
    bindSelect() {
      // this.setData({
      this.selectCash = !this.selectCash
      // });
    },

    onSelect(e) {
      var book = e.currentTarget.dataset.name;
      if (book == '充电桩') {
        // this.setData({
        this.book = book,
          this.eoc = '-1',
          this.cdz_link = 0,
          this.cdz_usin = 0,
          this.cdz_out = 0,
          this.selectCash = false
        // });
      }
      if (book == '电瓶车') {
        // this.setData({
        this.book = book,
          this.eoc = '1',
          this.cdz_link = 0,
          this.cdz_using = 0,
          this.cdz_out = 0,
          this.selectCash = false
        // });
      }
      this.checkAll();
      this.refresh();
    },

    //工具区
    //清空输入
    clearInput() {
      // this.setData({
      this.inputValue = ''
      // });
    },

    //输入框
    searchInput: function (e) {
      // this.setData({
      this.inputValue = e.detail.value
      // });
    },

    //方法区
    //1 点击搜索设备
    searchClick() {
      let inputData = this.inputValue;
      console.log(inputData);
      if (inputData != '') {
        status = -1;
        pageNum = 1;
        this.loadData(-1, 1);
      }
    },

    //2 检查全部
    checkAll: function () {
      let that = this;
      let userId = '';
      let eoc = that.eoc;
      const signObject = {
        userId,
        eoc
      };
      const signvalue = Sign.signutil(signObject);
      app.globalData
        .get(Api.checkDPCStatusAndNum, {
          userId,
          eoc,
          sign: signvalue
        })
        .then((res) => {
          res.forEach(function (item, index, res) {
            if (item.status == 0) {
              // that.setData({
              that.cdz_link = item.data
              // });
            }
            if (item.status == 2) {
              // that.setData({
              that.cdz_using = item.data
              // });
            }
            if (item.status == -1) {
              // that.setData({
              that.cdz_out = item.data
              // });
            }
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },

    refresh() {
      status = -1;
      pageNum = 1;
      this.loadData(-1, 1);
    },

    //3 刷新表格
    loadData(status, pageNum) {
      let this_ = this;
      let eoc = this_.eoc;
      const signObject = {
        pageSize,
        status,
        pageNum,
        eoc
      };
      console.log(signObject);
      const signvalue = Sign.signutil(signObject);
      app.globalData
        .get(Api.getDPCStatusInfoByPage, {
          status,
          pageSize,
          pageNum,
          eoc,
          sign: signvalue
        })
        .then((res) => {
          // this_.setData({
          this_.codes = res.data,
            this_.thisPage = pageNum,
            this_.pageSum = res.sum == null ? 0 : Math.ceil(res.sum / pageSize),
            this_.codeSum = res.sum == null ? 0 : res.sum
          // });
        })
        .catch((e) => {
          console.log(e);
        });
    },

    //4 筛选离线信息
    click_status(event) {
      status = event.currentTarget.dataset.status;
      pageNum = 1;
      this.loadData(status, pageNum);
    },

    prePage() {
      if (pageNum == 1) {
      } else {
        pageNum = pageNum - 1;
        this.loadData(status, pageNum);
      }
    },

    nextPage() {
      if (pageNum >= this.pageSum) {
      } else {
        pageNum = pageNum + 1;
        this.loadData(status, pageNum);
      }
    }
  }
};
</script>
<style>
@import "./sysCheck.css";
</style>
